import React,{useState,useEffect} from 'react'
import { PlusOutlined,LoadingOutlined } from '@ant-design/icons';
import { Upload,message} from 'antd';
import $axois,{ImgUrl} from '../../../utils/axios'



export default function UpLoadImg(props:any) {
    
    const [imageUrl, setImageUrl] = useState<any>();
    const [loading, setLoading] = useState(false);
    useEffect(()=>{
      console.log(props.imageUrl,11);
      setImageUrl(ImgUrl+"public/upload/u5598.png")
      
    },[])

    // 图片上传
    const beforeUpload = (file:any) => {
        const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
        if (!isJpgOrPng) {
          message.error('You can only upload JPG/PNG file!');
        }
        const isLt2M = file.size / 1024 / 1024 < 2;
        if (!isLt2M) {
          message.error('Image must smaller than 2MB!');
        }
        return isJpgOrPng && isLt2M;
      };
      const handleChange = (info:any) => {
          console.log(info)
          if (info.file.status === 'uploading') {
            setLoading(true);
            return;
          }
          if (info.file.status === 'done') {
            // Get this url from response in real world.
            getBase64(info.file.originFileObj, (url:any) => {
              setLoading(false);
              setImageUrl(url);
              
              props.uploadVal(info.file.response)
            });
          }
        };
        const getBase64 = (img:any, callback:any) => {
          const reader = new FileReader();
          reader.addEventListener('load', () => callback(reader.result));
          reader.readAsDataURL(img);
        };
        const uploadButton = (
          <div>
            {loading ? <LoadingOutlined /> : <PlusOutlined />}
            <div
              style={{
                marginTop: 8,
              }}
            >
              Upload
            </div>
          </div>
        );
  return (
    <Upload
        name="imgSrc"
        listType="picture-card"
        className="avatar-uploader"
        showUploadList={false}
        action="http://localhost:4001/admin/fileUpload"
        beforeUpload={beforeUpload}
        disabled={true}
        onChange={handleChange}
    >
        {imageUrl ? (
        <img
            src={imageUrl}
            alt="avatar"
            style={{
            width: '100%',
            }}
        />
        ) : (
        uploadButton
        )}
    </Upload>
  )
}
